<template>
  <div class="keybox-box">
    <v-chart class="pie-echart" :options="option" :auto-resize="true" />
  </div>
</template>

<script lang="ts">
import echarts from "echarts";
import { Component, Vue, Prop } from "vue-property-decorator";
import { EChartOption } from "echarts";
interface dataList {
  name: string;
  value: string;
  itemStyle:object
}
let colorList: Array<string> = ["#FF8E1B", "#FC3C2D", "#1466F7"];
@Component
export default class KeyBox extends Vue {
  @Prop() datas!:any
  public dataList: dataList[] = [
    {
      name: "设备告警数",
      value: this.datas && this.datas[0].value,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(255,142,27,1)",
            },
            {
              offset: 1,
              color: "rgba(255,142,27,0.1)",
            },
          ]),
        },
      },
    },
    {
      name: "通讯故障数",
      value: this.datas && this.datas[1].value,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            {
              offset: 0,
              color: "rgba(252,60,45,1)",
            },
            {
              offset: 1,
              color: "rgba(252,60,45,0.1)",
            },
          ]),
        },
      },
    },
    {
      name: "设备在线数",
      value: this.datas && this.datas[2].value,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "rgba(20,102,247,1)",
            },
            {
              offset: 1,
              color: "rgba(20,102,247,0.1)",
            },
          ]),
        },
      },
    },
  ];
  public option: EChartOption = {
    tooltip: {
      trigger: "item",
      borderColor: "rgba(255,255,255,.3)",
      backgroundColor: "rgba(13,5,30,.6)",
      borderWidth: 1,
      padding: 5,
      formatter: function (parms: any) {
        var str =
          parms.marker +
          "" +
          parms.data.name +
          "</br>" +
          "数量：" +
          parms.data.value +
          "</br>" +
          "占比：" +
          parms.percent +
          "%";
        return str;
      },
    },
    series: [
      {
        type: "pie",
        center: ["70%", "50%"],
        radius: ["25%", "45%"],
        clockwise: true,
        avoidLabelOverlap: true,
        hoverOffset: 15,
        itemStyle: {
          normal: {
            color: function (params: any) {
              return colorList[params.dataIndex];
            },
            // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //   {
            //     offset: 0,
            //     color: "red",
            //   },
            //   {
            //     offset: 1,
            //     color: "blue",
            //   },
            // ]),
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        label: {
          show: false,
        },
        data: this.dataList,
      },
      {
        type: "pie",
        name: "最外层细圆环",
        hoverAnimation: false,
        // clockWise: false,
        center: ["70%", "50%"],
        radius: ["50%", "50%"],
        itemStyle: {
          normal: {
            borderColor: "#0C4CBF",
            borderWidth: 1,
          },
        },
        label: {
          show: false,
        },
        data: [100],
      },
    ],
  }
}
</script>

<style lang="scss" scoped>
.keybox-box{
  width: 100%;
  height: 100%;
  display: flex;
}
</style>